/*
 *@description: 登录页面
 *@Author:@reynold
 *@Date:2025-03-20 15:34:07
 *@Update:2025-03-20 15:34:07
 *@Version: V1.0.0
*/
<template>
  <div class="login_box">
    <div class="login_form">
      <div class="sys_title">易洁家政后台管理系统</div>
      <el-input v-model="userForm.username" placeholder="请输入用户名"></el-input>
      <el-input v-model="userForm.password" placeholder="请输入密码" show-password></el-input>
      <el-button @click="userLogin" type="primary">登录</el-button>
    </div>
  </div>
</template>
<script>
import {login} from '@/api/user.js'
export default {
  data(){
    return{
      userForm:{
        username:'admin1',
        password:'123321'
      }
    }
  },
  methods:{
    userLogin(){
      // 判断用户名/密码是不是没有输入
      if(!this.userForm.username || !this.userForm.password){
        this.$message.error('用户名/密码不能为空')
      }else{
        // 登录
        // login(this.userForm).then(res=>{
        //   console.log(res);
        // }).catch(err=>{
        //   this.$message.error(err)
        // })

        if(this.userForm.username === 'admin1' && this.userForm.password === '123321'){
          sessionStorage.setItem('token','123456789')
          this.$router.push('/home')
          this.$message.success('登录成功')
        }else{
          this.$message.error('用户名/密码错误')
        }
      }
    }
  }
  // created(){
  //   console.log('登录页',login);
  // }
}
</script>
<style lang="less" scoped>
.login_box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('@/assets/bg.jpg');
  background-size: cover;
  background-position: center;

  .login_form {
    min-width: 400px;
    min-height: 300px;
    padding: 20px 30px;
    border-radius: 8px;
    background-color: rgba(75, 76, 76,.5);

    .sys_title {
      color: #fff;
      font-size: 25px;
      font-weight: 700;
      width: 100%;
      height: 20px;
      line-height: 20px;
      text-align: center;
      margin: 20px 0 30px 0;
    }

    .el-input {
      margin-bottom: 30px;
    }

    .el-button {
      width: 100%;
    }
  }
}
</style>